import React, { Component } from 'react';
import {connect} from 'react-redux'
import {ListActions} from '../_helpers/List.actions'


class Detail extends Component{

	componentDidMount() {
        this.props.dispatch(ListActions.getOne('/product/'+this.props.match.params.id+'/'));
    }
    

render(){
    if(this.props.status!=="one_success")
    return (<div></div>);

    const {one}=this.props;
    return <div>
        <div className="info">
            <div className="info_banner">
                <div className='swipe'>
                <i className="icon_return" onClick={()=>this.props.history.goBack()}></i>
                    <div className='swipe-wrap'>
                    <div data-index="0" className="swipe-item" >
                    <img id="houseimg" src="http://mf.znimg.com/thumb/dress_782x430/house_img/6572/dcc7b29467b7bf5738930946423a67d8.jpg" data_url="http://mf.znimg.com/upload/house_img/6572/dcc7b29467b7bf5738930946423a67d8.jpg" height="215" width="100%"/>
                    </div>

                    </div>
                </div>
            </div>
            <div className="info_name">
                <h3>{one.name}</h3>
                <div className="info_jg">
                    <span className="jg_m">{one.price_range[0]}~{one.price_range[1]}
                        <font>元/月</font>
         
                    </span>
                    {one.type==="condo" &&
                    <span className="lab_hezu">合租</span>}
                    {one.type==="hostel" &&
                    <span className="lab_hezu">公寓</span>}
                </div>
            </div>
            <div className="room_info">
                <div className="room_label">
                    <span>无中介费</span>
                </div>

                <div className="room_dizhi" >
                <i></i><span>{one.address}</span>
                    
                </div>
            </div>
            
            <div className="room_xinxi">
                <h4 className="info_title">房间信息</h4>

                
                 {one.children.map(item=>{
                     return (<ul key={item.id} className="room_xinxi_ul">
                     <li className="tindt_l">{item.name}</li>
                     {item.type==="condo"&&<React.Fragment><li className="tindt_l">{item.structure[0]}室{item.structure[1]}厅{item.structure[2]}卫</li>
                     <li className="tindt_l">剩余{item.stock}套</li></React.Fragment>}
                     {item.type==="single"&&<React.Fragment><li className="tindt_l">单间</li><li className="tindt_l">剩余{item.stock}间</li></React.Fragment>}
                    
                    <li>
                        <span>&yen;
                            <font>{item.price}</font>/月</span>
                    </li>

                </ul>)
                 })}
                    
               
            </div>
            
            <div className="room_guanjia">
                <h4 className="info_title">联系管家</h4>
                <div className="monph_kf" >
                    <div className="kf_tel">
                        <span>李阿姨</span>
                        <p>电话/微信：156225125412</p>
                    </div>
                    <i className="tel_icon"></i>
                </div>
            </div>
        </div>
    </div>
}
}

const connectedDetail = connect((state) => {
	const {one, status} = state.List;
    return {status,one};
})(Detail);

export {connectedDetail as Detail};